<!-- 地图视图 -->

<template>
  <div
    ref="view"
    class="MapReference-MapView"
    v-bind="markViewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mouseleave="mouseLeave"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground @loaded="toLoaded">
      <MarkPoint v-if="markObj" :obj="markObj" />
      <ViewPoint
        v-for="item in pointList"
        :key="item.deviceId"
        :obj="item"
        :hide="map_one.deviceId === item.deviceId"
        @edit="mouseMove"
      />
    </ViewBackground>

    <ViewName />

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default CORE.extend(MapView, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapView',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(MapView.components, require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MapView.computed,

    /**
     * 标记视图的属性
     */
    markViewProps() {
      const { map_one, viewProps } = this
      const mark = map_one.deviceId ? ' Secure-MapView-inMark' : ''
      return { class: `${viewProps.class}${mark}` }
    },

    /**
     * 点位列表
     */
    pointList() {
      const { map_info: obj } = this
      return [
        { ...obj, deviceId: 1, left: obj.pointX1, top: obj.pointY1 },
        { ...obj, deviceId: 2, left: obj.pointX2, top: obj.pointY2 },
        { ...obj, deviceId: 3, left: obj.pointX3, top: obj.pointY3 },
      ]
    },

    /**
     * 标记的对象
     */
    markObj() {
      const { map_one } = this
      if (!map_one.deviceId) return null
      return map_one
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MapView.methods,

    /**
     * 鼠标按下
     */
    mouseDown({ srcElement, button, clientX, clientY }) {
      if (this.checkNoMove(srcElement)) return

      if (this.map_one.deviceId) return
      if (button === 0) this.transStart(clientX, clientY)
    },

    /**
     * 鼠标弹起
     */
    mouseUp({ button }) {
      if (this.map_one.deviceId) {
        button === 0 && this.toSubmit()
        button === 2 && this.map_setOne(this.map_info)
      } else {
        button === 0 && this.transStop()
        button === 1 && this.initTransScale()
        button === 2 && this.rotateStop()
      }
    },

    /**
     * 鼠标移动
     */
    mouseMove({ clientX, clientY }) {
      if (this.map_one.deviceId) {
        this.changePoint(clientX, clientY)
      } else {
        this.inTrans && this.transDoing(clientX, clientY)
        this.inRotate && this.rotateDoing(clientX, clientY)
      }
    },

    /**
     * 鼠标离开
     */
    mouseLeave() {
      const { map_one } = this
      if (!map_one.deviceId) return

      Object.assign(map_one, { left: null, top: null })
    },

    /**
     * 改变点位
     */
    changePoint(clientX, clientY) {
      const { map_one } = this
      const { map } = this.$children[0].$refs
      const { width, height, top, left } = map.getBoundingClientRect()

      const x = clientX < left || clientX > left + width ? null : (clientX - left) * 100 / width
      const y = clientY < top || clientY > top + height ? null : (clientY - top) * 100 / height

      const num = map_one.deviceId
      Object.assign(map_one, { left: x, top: y, [`pointX${num}`]: x, [`pointY${num}`]: y })
    },

    /**
     * 提交点位
     */
    toSubmit() {
      this.map_startEdit()
    },
  },
})
</script>
